<template>
  <div class="video-screen">
    <div class="container cruise-video">
      <EasyPlayer
          class="player-wrapper-content"
          id="videoEasyHuo"
          ref="easyPlayer"
          controls
          :videoUrl="url"
          live
          height="100%"
          width="100%"
          :auto-play="true"
          :isaspect="false"
          :stretch="false"
          :muted="true"
          :show-custom-button="false"
      ></EasyPlayer>
    </div>
  </div>
</template>

<script>
import EasyPlayer from "@easydarwin/easyplayer";
import { postData } from "@/request/http";

export default {
  name: "videoWs",
  components: { EasyPlayer },
  props: {
    url: {
      type: String,
      default: "",
    },

  },
  data() {
    return {
      video: null,
      videoUrl: "",
      videoData: {},
      videoIcon: {
        stop: require("@/assets/img/video-stop2.png"),
      },
      url_new: "",
    };
  },
  computed: {},
  created() {},
  mounted() {
    // this.video = this.$refs.video;
    // this.$nextTick(()=> {
    //   this.$refs.easyPlayer.play()
    // })
    // if (this.video.videoUrl != "") {
    //   this.video.destroyVideoJS();
    // }
  },
  methods: {},
  watch: {},
};
</script>
<style scoped>
.video-screen {
  width: 100%;
  height: 100%;
  z-index: 999;
}
.player-wrapper-content {
  width: 100%;
  height: 100%;
}
.container {
  width: 100%;
  height: 100%;
  position: relative;
}
.label {
  position: absolute;
  right: left;
  top: 0;
  background-color: rgba(0, 0, 0, 0.2);
  width: auto;
  height: 35px;
  line-height: 35px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  border-radius: 10px;
  z-index: 999;
}
.chns-label {
  margin-right: 10px;
}
.btn-wrap {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  z-index: 9999;
}
/* .play-btn {
  cursor: pointer;
}
.play-btn img {
  width: 80%;
  height: 80%;
} */
.stop-btn {
  cursor: pointer;
  z-index: 9999;
}
.stop-btn img {
  width: 60%;
  height: 60%;
}

/* 隐藏播放、暂停等各类播放器功能按钮 */

video::-webkit-media-controls-play-button {
  display: none;
}
video::-webkit-media-controls-timeline {
  display: none;
}
video::-webkit-media-controls-mute-button {
  display: none;
}
/*
video::-webkit-media-controls-fullscreen-button {
    display: none;
}
video::-webkit-media-controls-current-time-display{
    display: none;
}
video::-webkit-media-controls-time-remaining-display {
    display: none;
}

video::-webkit-media-controls-toggle-closed-captions-button {
    display: none;
}
video::-webkit-media-controls-volume-slider {
    display: none;
}
video::-webkit-media-controls-enclosure{
    display: none;
} */

/* 视频全铺 */
.video {
  object-fit: fill;
}
</style>
<style>
.player-wrapper-content .player-content {
  width: 100%;
  height: 100%;
}

.player-wrapper-content .video-wrapper {
  position: revert!important;
}
</style>
